<template>
  <div>
    <van-nav-bar title="不凡乐购" left-text="返回" left-arrow @click-left="onClickLeft" class="navbar" />
    <div class="contentBox">
      <div class="goods">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in gallery" :key="item.id">
            <img :src="item.img_url" alt />
          </van-swipe-item>
        </van-swipe>
        <div class="swiper-b">
          <div class="item">30天无忧退货</div>
          <div class="item">48小时快速退款</div>
          <div class="item">满88元免邮费</div>
        </div>
        <div class="goods-info">
          <div class="c">
            <p class="name">{{info.name}}</p>
            <p class="txt">{{info.goods_brief}}</p>
            <p class="price">￥{{info.retail_price}}</p>
          </div>
        </div>
        <div class="section-nav" @click="choose">
          <div>请选择规格数量</div>
          <div class="icon"></div>
        </div>
        <div class="attribute">
          <div class="head">商品参数</div>
          <div class="item" v-for="item in attribute" :key="item.id">
            <div class="left">{{item.name}}</div>
            <div class="right">{{item.value}}</div>
          </div>
        </div>
        <div class="img-box" v-html="imghtml"></div>
        <div class="common-problem">
          <div class="h">
            <div class="line"></div>
            <div class="title">常见问题</div>
            <div class="line"></div>
          </div>
          <div class="b">
            <div class="item" v-for="item in issue" :key="item.id">
              <div class="question-box">
                <div class="spot"></div>
                <div class="question">{{item.question}}</div>
              </div>
              <div class="answer">{{item.answer}}</div>
            </div>
          </div>
        </div>
        <div class="intro">
          <div class="h">---大家都在看---</div>
          <div class="sublist">
            <router-link
              replace
              :to="`/home/new/good?id=${item.id}`"
              class="li"
              v-for="item in productList"
              :key="item.id"
            >
              <img :src="item.list_pic_url" alt />
              <p class="name">{{item.name}}</p>
              <p class="price">￥{{item.retail_price}}</p>
            </router-link>
          </div>
        </div>
        <div class="bottom">
          <van-goods-action>
            <van-goods-action-icon icon="star" text="添加收藏" :color="this.color" ref="star" @click="collect"/>
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="this.badge" @click="tocart" />
            <van-goods-action-icon icon="shop-o" text="店铺" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addcart(info)" />
            <van-goods-action-button type="danger" text="立即购买" @click="buy" />
          </van-goods-action>
        </div>

        <div class="content" v-show="flag">
          <div class="top">
            <div class="left">
              <img :src="info.primary_pic_url" alt />
            </div>
            <div class="right">
              <div>
                <p class="price">￥{{info.retail_price}}</p>
                <p class="num">库存{{info.goods_number}}</p>
              </div>
            </div>
            <div class="close" @click="close">x</div>
          </div>
          <div class="b">
            <p>数量</p>
            <van-stepper v-model="value" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { detailaction, addCart, cartList, addcollect } from "@/api/home";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      flag: false,
      color:"#ccc",
      value: 1,
      badge: 0,
      gallery: [],
      info: {},
      attribute: [],
      imghtml: "",
      issue: [],
      productList: []
    };
  },
  // beforeRouteUpdate (to, from, next){
  //   console.log(to);
  //   next()
  // },
  watch: {
    $route: function(to, from) {
      console.log(to, from);
      detailaction({
        id: this.$route.query.id,
        openId: 17516331686
      }).then(res => {
        console.log(res);
        this.gallery = res.gallery;
        this.info = res.info;
        this.issue = res.issue;
        this.attribute = res.attribute;
        this.productList = res.productList;
        this.imghtml = res.info.goods_desc;
      });
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    close() {
      this.flag = false;
    },
    choose() {
      this.flag = true;
    },
    addcart(info) {
      // this.flag = true;
      console.log(info);
      addCart({
        goodsId: this.info.id,
        number: this.value,
        openId: 17516331686
      }).then(res => {
        console.log(res);
      });
      Toast.success("添加到购物车成功");
      this.badge = this.value + this.badge;
    },
    tocart() {
      this.$router.push("/cart");
      cartList({
        openId: 17516331686
      }).then(res => {
        console.log(res);
      });
    },
    buy() {
      this.flag = true;
      Toast.loading({
        message: "即将前往付款页面...",
        forbidClick: true
      });
    },
    collect(){
      addcollect({
        goodsId:this.info.id,
        openId: 17516331686
      }).then(res=>{
        console.log(res);
      })
      // this.$refs.star.color = "#ff5000"
      this.color = "#ff5000"
    }
  },
  created() {
    detailaction({
      id: this.$route.query.id,
      openId: 17516331686
    }).then(res => {
      console.log(res);
      this.gallery = res.gallery;
      this.info = res.info;
      this.issue = res.issue;
      this.attribute = res.attribute;
      this.productList = res.productList;
      this.imghtml = res.info.goods_desc;
    });
    cartList({
      openId: 17516331686
    }).then(res => {
      // console.log(res.data.length);
      this.badge = res.data.length;
    });
  }
};
</script>

<style lang="scss" scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.contentBox {
  height: calc(100% - 1.24rem);
  margin-top: 1.22667rem;
  overflow: auto;
  border-top: 0.01333rem solid transparent;
  .goods {
    overflow: hidden;
    .my-swipe {
      width: 10rem;
      height: 10rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .swiper-b {
      width: 9.46667rem;
      height: 0.97333rem;
      margin: 0 auto;
      background: #f4f4f4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item {
        background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png)
          0 no-repeat;
        background-size: 0.13333rem;
        padding-left: 0.2rem;
        display: flex;
        align-items: center;
        font-size: 0.33333rem;
        color: #666;
      }
    }
    .goods-info {
      width: 10rem;
      height: 4.08rem;
      background: #fff;
      margin: 0 auto;
      border-bottom: 0.01333rem solid #f4f4f4;
      .c {
        height: 100%;
        .name {
          font-size: 0.54667rem;
          padding: 0.26667rem;
        }
        .txt {
          margin-bottom: 0.33333rem;
          font-size: 0.32rem;
          color: #999;
        }
        .price {
          margin-top: 0.13333rem;
          font-size: 0.46667rem;
          color: #b4282d;
        }
      }
    }
    .section-nav {
      height: 1.44rem;
      background: #fff;
      margin-bottom: 0.26667rem;
      padding: 0 0.26667rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        width: 0.69333rem;
        height: 0.69333rem;
        background: url("../../../assets/images/address_right.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .attribute {
      padding: 0.26667rem 0.4rem;
      background: #fff;
      margin-bottom: 0.26667rem;
      .head {
        font-size: 0.50667rem;
        padding: 0.26667rem 0;
      }
      .item {
        display: flex;
        background: #f7f7f7;
        padding: 0.26667rem 0;
        margin: 0.26667rem;
        .left {
          width: 1.78667rem;
          font-size: 0.33333rem;
          color: #999;
          text-align: left;
        }
        .right {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .img-box /deep/ p {
      padding: 0;
      margin: 0;
      width: 10rem;
      height: 2.666667rem;
      &:nth-last-child(1) {
        height: 0.373333rem;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .common-problem {
      margin-bottom: 1.46667rem;
      .h {
        padding: 0.46667rem 0;
        background: #fff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        .line {
          display: inline-block;
          height: 0.01333rem;
          width: 1.33333rem;
          background: #ccc;
        }
        .title {
          padding: 0 0.33333rem;
          background: #fff;
        }
      }
      .b {
        padding: 0 0.4rem;
        background: #fff;
        .item {
          padding-bottom: 0.33333rem;
          .question-box {
            display: flex;
            .spot {
              height: 0.10667rem;
              width: 0.10667rem;
              background: #b4282d;
              border-radius: 50%;
              margin-top: 0.14667rem;
            }
            .question {
              line-height: 0.4rem;
              padding-left: 0.10667rem;
              display: block;
              font-size: 0.34667rem;
              padding-bottom: 0.2rem;
              color: #303030;
            }
          }
          .answer {
            line-height: 0.53333rem;
            padding-left: 0.21333rem;
            font-size: 0.34667rem;
            color: #787878;
            text-align: left;
          }
        }
      }
    }
    .intro {
      margin-bottom: 1.46667rem;
      .h {
        padding: 0.46667rem 0;
        background: #fff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .sublist {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 9.73333rem;
        margin: 0 auto;
        .li {
          display: inline-block;
          width: 4.8rem;
          background: #fff;
          margin-bottom: 0.13333rem;
          padding-bottom: 0.13333rem;
          img {
            display: block;
            width: 4.02667rem;
            height: 4.02667rem;
            margin: 0 auto;
          }
          p {
            margin-bottom: 0.06667rem;
            text-indent: 1em;
          }
          .name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 98%;
          }
          .price {
            color: #9c3232;
          }
        }
      }
    }
    .bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 10rem;
      height: 1.33333rem;
      display: flex;
      background: #fff;
      z-index: 10;
      border: 1px solid #ccc;
    }

    .content {
      position: fixed;
      width: 100%;
      height: 6.66667rem;
      bottom: 0;
      transition: all 0.4s ease;
      box-sizing: border-box;
      padding: 0.4rem;
      background: #f8f4f7;
      .top {
        display: flex;
        margin-bottom: 0.46667rem;
        position: relative;
        .left {
          height: 2.36rem;
          width: 2.36rem;
          margin-right: 0.4rem;
          img {
            float: left;
            height: 2.36rem;
            width: 2.36rem;
          }
        }
        .right {
          flex: 1;
          display: flex;
          align-items: flex-end;
          div {
            width: 1.6rem;
            height: 2.133333rem;
            p {
              width: 100%;
              height: 0.586667rem;
              line-height: 0.6rem;
              text-align: center;
            }
            .price {
              color: #b4282d;
            }
          }
        }
        .close {
          position: absolute;
          right: 0;
          top: 0;
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 50%;
          border: 1px solid #ccc;
          font-size: 0.6rem;
          color: #999;
        }
      }
      .b {
        width: 9.2rem;
        height: 1.493333rem;
        margin: 0.266667rem auto;
        text-align: left;
      }
    }
  }
}
</style>